import AuthRoute from "../router/listener";
import Header from "./components/header";

import React, {useState} from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
    SettingOutlined,
    CheckCircleOutlined,
} from '@ant-design/icons';
import {Drawer, Layout, Menu, FloatButton, Breadcrumb, } from 'antd';
import "./routerView.less";

const {Sider, Content} = Layout;

export default class RouterView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
            showSider: window.innerWidth > 900,
            clientY: 100,
            drawerOpen: false,
            theme: "dark" // light
        }
    }

    componentDidMount() {
        window.addEventListener("resize", this.windowResize.bind(this));
    }

    componentWillUnmount() {
        window.removeEventListener("resize", this.windowResize.bind(this));
    }

    windowResize() {
        this.setState({showSider: window.innerWidth > 900})
    }

    render() {
        const {collapsed, showSider, clientY, theme, drawerOpen} = this.state;
        const setCollapsed = bool => {
            this.setState({collapsed: bool})
        };
        const systemSettingMouseDown = (e) => {
            const t = e.clientY - clientY;
            document.onmousemove = e1 => {
                let y = e1.clientY - t;
                if (y <= 0) {
                    y = 0;
                }
                if (y >= window.innerHeight - e.target.offsetHeight) {
                    y = window.innerHeight - e.target.offsetHeight;
                }
                this.setState({clientY: y});
            }
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }


        return (
            <Layout
                style={{
                    height: "100%",
                    backgroundColor: '#fff'
                }}
            >
                {showSider &&
                (<Sider trigger={null} collapsible collapsed={collapsed} theme={theme}>
                    <div className="demo-logo-vertical"/>
                    <Menu
                        theme={theme}
                        style={{height: "100%"}}
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        items={[
                            {
                                key: '1',
                                icon: <UserOutlined/>,
                                label: 'nav 1',
                            },
                            {
                                key: '2',
                                icon: <VideoCameraOutlined/>,
                                label: 'nav 2',
                            },
                            {
                                key: '3',
                                icon: <UploadOutlined/>,
                                label: 'nav 3',
                            },
                        ]}
                    />
                </Sider>)}
                <Layout id={'layout-content'}>
                    <Header pState={{showSider, collapsed, setCollapsed}}/>
                    <Breadcrumb className={'layout-header'} style={{padding: "16px 24px"}}>
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                    </Breadcrumb>
                    <FloatButton className={"system-setting"}
                                 type="primary"
                                 shape="square"
                                 style={{top: clientY}}
                                 onClick={() => this.setState({drawerOpen: true})}
                                 onMouseDown={systemSettingMouseDown}
                                 icon={<SettingOutlined/>}/>
                    <Drawer title="系统主题"
                            closeIcon={false}
                            open={drawerOpen}
                            className={"system-theme"}
                            onClose={() => this.setState({drawerOpen: false})}>
                        <div>
                            <h5>整体风格</h5>
                            <ul className={"system-theme-style"}>
                                <li><CheckCircleOutlined /></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </Drawer>
                    <Content>
                        <AuthRoute/>
                    </Content>
                </Layout>
            </Layout>
        )
    }
}